<template>
	<view>

		<view v-if="size=='mini'" class="menu-item-mini" @click="menuClick(title)">
			<table width="100%">
				<tr>
					<view class="remarkview_mini">{{title}}</view>
				</tr>
				<tr>
				</tr>
			</table>
		</view>

		<view v-if="size!='mini'" class="menu-item" @click="menuClick(title)">
			<view class="qr" style="position: relative;">
				<image :src="mySrc" mode=""></image>
				<view v-if="reddot=='true'"
					style="position: absolute; top: 0px; right: 10px; background-color: red; color: white; border-radius: 50%; width: 12px; height: 12px; display: flex; align-items: center; justify-content: center;">
				</view>
			</view>
			<table width="100%">
				<tr>
					<text v-if="reddot=='true'" style="font-size: 30rpx;color: black;"
						class="flashtext">{{title}}</text><text v-if="reddot!='true'"
						style="font-size: 30rpx;color: black;">{{title}}</text>
				</tr>
				<tr>
					<view class="remarkview" v-if="remark!=''">{{remark}}</text></view>
				</tr>
			</table>
		</view>
	</view>
</template>
<script>
	export default {
		data() {

			return {};
		},
		props: {
			// 菜单图标
			mySrc: {
				type: String,
				default: '',
			},
			title: {
				type: String,
				default: '',
			},
			remark: {
				type: String,
				default: '',
			},
			reddot: {
				type: String,
				default: 'false'
			},
			size: {
				type: String,
				default: ''
			}
		},
		methods: {
			menuClick(title) {
				this.$emit("menuClick", title);
			},
		}
	};
</script>
<style lang="scss" scoped>
	.menu-item {
		height: 150rpx;
		display: flex;
		align-items: center;
		margin: 0 30rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #e5e5e5;
		background: url(./more.png) no-repeat right center;
		background-size: 30rpx 30rpx;
	}

	.menu-item image {
		width: 100rpx;
		height: 100rpx;
		margin-right: 25rpx;
		border-radius: 10rpx;
	}

	.menu-item-mini {
		height: 60rpx;
		width: 100%;
		display: flex;
		align-items: center;
		margin: 0 30rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #e5e5e5;
		background: url(./more.png) no-repeat right center;
		background-size: 30rpx 30rpx;
	}

	.remarkview {
		width: 90%;
		height: 30rpx;
		margin-top: 15rpx;
		color: #000000;
		font-size: 0.7em;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		word-break: break-all;
	}

	.remarkview_mini {
		width: 100%;
		height: 30rpx;
		margin-top: -15rpx;
		color: #000000;
		font-size: 30rpx;
	}

	.flashtext {
		animation: twinkle 0.5s infinite alternate;
	}

	@keyframes twinkle {
		0% {
			color: red;
		}

		50% {
			color: red;
		}

		50.01% {
			color: black;
		}

		100% {
			color: black;
		}
	}
</style>